<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐系统 - 登录/注册</title>
    <link rel="stylesheet" href="res/layui/css/layui.css">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .login-container {
            background: white;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            width: 450px;
            padding: 40px;
        }
        .login-title {
            text-align: center;
            margin-bottom: 30px;
        }
        .login-title h2 {
            color: #667eea;
            font-size: 28px;
            margin-bottom: 10px;
        }
        .login-title p {
            color: #999;
            font-size: 14px;
        }
        .layui-tab-title {
            text-align: center;
        }
        .layui-tab-title li {
            width: 50%;
        }
        .layui-form-item {
            margin-bottom: 20px;
        }
        .submit-btn {
            width: 100%;
            height: 45px;
            font-size: 16px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
        }
        .submit-btn:hover {
            opacity: 0.9;
        }
        .layui-icon-music {
            font-size: 48px;
            color: #667eea;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-title">
            <i class="layui-icon layui-icon-music"></i>
            <h2>音乐系统</h2>
            <p>Music Management System</p>
            <button class="layui-btn layui-btn-xs layui-btn-warm" onclick="createTestUser()" style="margin-top: 10px;">
                <i class="layui-icon layui-icon-add-circle"></i> 创建测试账号
            </button>
        </div>

        <div class="layui-tab layui-tab-brief" lay-filter="loginTab">
            <ul class="layui-tab-title">
                <li class="layui-this">登录</li>
                <li>注册</li>
            </ul>
            <div class="layui-tab-content">
                <!-- 登录表单 -->
                <div class="layui-tab-item layui-show">
                    <form class="layui-form" lay-filter="loginForm">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                                <input type="text" name="username" required lay-verify="required" 
                                       placeholder="请输入用户名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="password" required lay-verify="required" 
                                       placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn submit-btn" lay-submit lay-filter="loginSubmit">登录</button>
                            </div>
                        </div>
                    </form>
                </div>
                
                <!-- 注册表单 -->
                <div class="layui-tab-item">
                    <form class="layui-form" lay-filter="registerForm">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                                <input type="text" name="username" required lay-verify="required" 
                                       placeholder="请输入用户名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="password" required lay-verify="required" 
                                       placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">手机号</label>
                            <div class="layui-input-block">
                                <input type="text" name="phone" lay-verify="phone" 
                                       placeholder="请输入手机号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-block">
                                <input type="text" name="email" lay-verify="email" 
                                       placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn submit-btn" lay-submit lay-filter="registerSubmit">注册</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="switch-login" style="text-align: center; margin-top: 20px; color: #999;">
            <span>管理员？</span>
            <a href="adminLogin.html" style="color: #667eea; text-decoration: none;">
                <i class="layui-icon layui-icon-set"></i> 切换到管理员登录
            </a>
        </div>
    </div>

    <script src="res/layui/layui.js"></script>
    <script>
        const API_BASE = 'http://localhost:8080';
        
        // 创建测试用户
        function createTestUser() {
            var loadIndex = layui.layer.load(2, {shade: [0.3, '#000']});
            
            fetch(API_BASE + '/user/createTestUser')
            .then(res => res.json())
            .then(result => {
                layui.layer.close(loadIndex);
                if(result.success) {
                    layui.layer.alert(result.message, {
                        icon: 1,
                        title: '成功',
                        btn: ['确定']
                    });
                } else {
                    layui.layer.msg(result.message, {icon: 2});
                }
            })
            .catch(err => {
                layui.layer.close(loadIndex);
                layui.layer.msg('创建失败: ' + err.message, {icon: 2});
            });
        }

        layui.use(['form', 'layer', 'element'], function(){
            var form = layui.form;
            var layer = layui.layer;
            var element = layui.element;

            // 登录表单提交
            form.on('submit(loginSubmit)', function(data){
                console.log('=== 开始登录 ===');
                console.log('表单数据:', data.field);
                
                var loadIndex = layer.load(2, {shade: [0.3, '#000']});
                
                fetch(API_BASE + '/user/login', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(data.field)
                })
                .then(res => {
                    console.log('响应状态:', res.status, res.statusText);
                    if (!res.ok) {
                        throw new Error('HTTP ' + res.status + ': ' + res.statusText);
                    }
                    return res.json();
                })
                .then(result => {
                    console.log('登录响应:', result);
                    layer.close(loadIndex);
                    
                    if(result.success) {
                        console.log('✅ 登录成功');
                        // 保存用户信息到localStorage
                        localStorage.setItem('userInfo', JSON.stringify(result.data));
                        localStorage.setItem('token', result.data.id);
                        
                        layer.msg('登录成功！', {icon: 1, time: 1000}, function(){
                            window.location.href = 'test.html';
                        });
                    } else {
                        console.log('❌ 登录失败:', result.message);
                        layer.alert('登录失败：' + (result.message || '未知错误') + 
                                   '<br><br>提示：<br>1. 请先点击上方"创建测试账号"按钮<br>2. 使用账号 admin/123456 登录<br>3. 或先注册新账号', 
                                   {icon: 2, title: '登录失败'});
                    }
                })
                .catch(err => {
                    console.error('❌ 登录错误:', err);
                    layer.close(loadIndex);
                    layer.alert('登录请求失败：' + err.message + 
                               '<br><br>可能的原因：<br>1. 后端服务未启动<br>2. 网络连接问题<br>3. 跨域问题', 
                               {icon: 2, title: '错误'});
                });
                
                return false;
            });

            // 注册表单提交
            form.on('submit(registerSubmit)', function(data){
                var loadIndex = layer.load(2, {shade: [0.3, '#000']});
                
                fetch(API_BASE + '/user', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(data.field)
                })
                .then(res => {
                    console.log('Register response status:', res.status);
                    if (!res.ok) {
                        throw new Error('请求失败: ' + res.status);
                    }
                    return res.json();
                })
                .then(result => {
                    console.log('Register result:', result);
                    layer.close(loadIndex);
                    if(result.success) {
                        layer.msg('注册成功！请登录', {icon: 1, time: 1500}, function(){
                            // 切换到登录选项卡
                            element.tabChange('loginTab', 0);
                            // 清空注册表单
                            document.querySelector('[lay-filter="registerForm"]').reset();
                            form.render();
                        });
                    } else {
                        layer.msg('注册失败: ' + (result.message || '未知错误'), {icon: 2});
                    }
                })
                .catch(err => {
                    console.error('Register error:', err);
                    layer.close(loadIndex);
                    layer.msg('注册失败: ' + err.message, {icon: 2});
                });
                
                return false;
            });
        });
    </script>
</body>
</html>
